<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" size="default" :disabled="send.status === 'info'">
    <el-row>
      <el-col :span="12">
        <el-form-item label="车辆号码" prop="vehicleNum">
          <el-input v-model.trim="ruleForm.vehicleNum" placeholder="请输入车辆号码" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="负责人" prop="contactPersonName">
          <el-input v-model.trim="ruleForm.contactPersonName" placeholder="请输入负责人" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="车辆类型" prop="vehicleType" :rules="rules.vehicleType">
          <el-select v-model="ruleForm.vehicleType" placeholder="请选择车辆类型">
            <el-option v-for="item in commonConst.vehicleTypeList" :label="item.value" :value="item.value"
              :key="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属单位" prop="workUnit">
          <el-input v-model.trim="ruleForm.workUnit" placeholder="请输入所属单位" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="负责人联系电话" prop="contactPersonTel">
      <el-input v-model.trim="ruleForm.contactPersonTel" maxlength="11" placeholder="请输入负责人联系电话"
        oninput="value=value.replace(/[^\d]/g, '')" clearable></el-input>
    </el-form-item>
    <el-form-item label="单位地址" prop="unitAddress">
      <el-input v-model.trim="ruleForm.unitAddress" placeholder="请输入单位地址" clearable></el-input>
    </el-form-item>
    <el-form-item label="照片" prop="enclosureImage">
      <UploadImage :imgUrl="ruleForm.enclosureImage" @uploadFile="uploadFile"></UploadImage>
    </el-form-item>
    <el-form-item v-if="send.status !== 'info'" class="form-btn">
      <el-button type="danger" @click="resetForm(ruleFormRef)">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, watch, getCurrentInstance } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import commonConst from "@/config/const.js";
import UploadImage from '@/components/upload/UploadImage';
import { UP_LOAD_URL } from "@/config"
/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;

interface RuleForm {
  id?: Number
  vehicleNum: string
  contactPersonName: string
  vehicleType: string
  workUnit: string
  contactPersonTel?: string
  unitAddress?: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  vehicleNum: '',
  contactPersonName: '',
  vehicleType: '',
  workUnit: '',
  contactPersonTel: '',
  unitAddress: '',
  enclosureImage: '',
})

const rules = reactive<FormRules>({
  vehicleNum: [
    { required: true, message: '请输入车辆号码', trigger: 'blur' }
  ],
  contactPersonName: [
    { required: true, message: '请输入负责人', trigger: 'blur' }
  ],
  vehicleType: [
    { required: true, message: '请选择车辆类型', trigger: 'blur' }
  ],
  workUnit: [
    { required: true, message: '请选择所属单位', trigger: 'blur' }
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let api = ''
      if(send.value.status === 'add'){
        api = 'addVehicle'
      }else{
        api = 'updateVehicle'
      }
      global.$api[api](ruleForm).then(({ data }) => {
        if (data.status === "OK") {
          if(send.value.status === 'add'){
            ElMessage.success('新增成功！');
          }else{
            ElMessage.success('变更成功！');
          }
        }
        resetForm(ruleFormRef.value);
        emits("clean", { info: {}, status: "" })
      })
      
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields();
  formEl.clearValidate();
}
/**
 * 父组件传给子组件的prop
 */
const props = defineProps({
  send: Object
})
const { send } = toRefs(props);

/**
 * 子组件触发父组件的方法
 */
const emits = defineEmits(['clean'])
const uploadFile = value => {
  ruleForm.enclosureImage = value;
}

watch(send, (newVal) => {
  resetForm(ruleFormRef.value);
  Object.assign(ruleForm, newVal.info);
},
{
  deep: true,
  immediate: true
})
</script>